<template>
	<view>
		<uni-table :loading="isLoading" border stripe>
			<uni-tr>
				<uni-th align="center">金币</uni-th>
				<uni-th align="center">间隔时间(分钟)</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in data" :key="index">
				<uni-td align="center">{{ item.coin }}</uni-td>
				<uni-td align="center">{{ item.time }}</uni-td>
				<uni-td align="center">
					<view class="uni-group"><button @click="update(item)" class="uni-button" size="mini"
							type="primary">修改</button></view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-popup ref="passwordPopup" type="center">
			<view class="modal" style="width:450px; padding: 20px;">
				<view class="uni-container">
					<uni-forms ref="form" validateTrigger="bind">
						<uni-forms-item label="金币" name="title" labelWidth="100">
							<input class="uni-input-border" type="text" placeholder="金币" v-model="changedata.coin" />
						</uni-forms-item>
						<uni-forms-item label="间隔时间(分钟)" name="title" labelWidth="100">
							<input class="uni-input-border" type="text" placeholder="间隔时间" v-model="changedata.time" />
						</uni-forms-item>
						<view class="uni-button-group pointer"><button class="uni-button uni-button-full" type="primary"
								:disabled="isLoading" @click="save">保存</button></view>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				data: [],
				changedata: {
					coin: 0,
					time: 0,
					key: ""
				}
			}
		},
		mounted() {
			this.gethongbao()
		},
		methods: {
			gethongbao() {
				this.isLoading = true
				this.data = []
				uni.showLoading({
					title: '加载中'
				});
				uniCloud.callFunction({
					name: 'uni-admin',
					data: {
						action: "admin/loadconfig",
						data: {
							id: 'hongbao'
						}
					}
				}).then((res) => {
					var json = res.result.config
					console.log("json: ",json);
					for (var i = 1; i <= 10; i++) {
						var item = json['red' + i]
						item['key'] = 'red' + i
						this.data.push(item)
					}
					uni.hideLoading();
				}).catch((res) => {
					console.log(res)
				}).finally(err => {
					this.isLoading = false
					uni.hideLoading();
				})
			},
			update(data) {
				for (let key in data) {
					this.changedata[key] = data[key]
				}
				console.log(this.changedata)
				this.$refs.passwordPopup.open()
			},
			save() {
				uni.showLoading({
					title: '保存中'
				});
				uniCloud.callFunction({
					name: 'uni-admin',
					data: {
						action: "admin/changehongbao",
						data: this.changedata
					}
				}).then((res) => {
					console.log(res, "save-------------")
					this.isLoading = false
					uni.hideLoading();
					uni.showToast({
						title: "修改成功",
						icon: 'none',
						duration: 2000
					})
					this.$refs.passwordPopup.close()
				}).catch((res) => {
					console.log(res)
				}).finally(err => {
					this.isLoading = false
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style>
	.modal {
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		background-color: #ffffff;
	}

	.modal-content {
		padding: 15px;
		height: 500px;
		box-sizing: border-box;
	}

	.password-popup {
		padding: 30px;
	}
</style>
